<!doctype html>
<html>
<head>
#parse("vm/common/header.html")
<script>

var type_chart = "bar"; // "column";


$(document).ready(function () {
    $("#ketqua_container").hide();
    //---------init--------------
    //lay danh sach hoc ky

    //---------------------------
    

});

function report() {
    //hide
    $("#ketqua_container").hide();

    //lay du lieu tu server
    getData();
}

function getData() {
    //call server to get data
    jQuery.ajax({
        type: "POST",
        url: "taichinh/data1.action?hocKy=" + jQuery("#hocKy").val(),
        data: {} ,//rqdata,
        contentType: "application/json; charset=utf-8",
        dataType: "json", //dung cai nay thi response phai dung json format, neu khong thi error parseerror
        success: function (response) {
	        var data = response;
	        //process data 
			alert(reponse);
	        
	        return;
	        if(data.length>0){
	        	//view data
	        	viewData(data);
	        }else{
	        	alert("NODATA");
	        }
    	},error: function (xhr, status, error) {
    		alert('ERROR');
            var err = eval("(" + xhr.responseText + ")");
            console.log(err.Message);
        }
    });
}

function viewData(data) {
    var datainfo = createTable(data);
	
  	//---show------
    $("#ketqua_container").show();
  	
  	
    //---draw-chart---
    drawChart(datainfo);
}

function createTable(data) {
	var categories = [];
	var datas = [];
	//----------------------
    //create tbl
    var tblid = "table_container";
    
    var html = '<table id="' + tblid + '" class="table">';
    html+= ' <thead>';
    html+= '    <tr>';
    html+= '      <th>STT</th>';
    html+= '      <th>Môn học</th>';
    html+= '       <th>Số sinh viên</th>';
    html+= '    </tr>';
    html+= '  </thead>';
    html+= '  <tbody>';
    
    for(var i = 0 ; i < data.length; i++){
    	var it = data[i];
	    html+= '    <tr>';
	    html+= '      <td>' +(i+1) + '</td>';
	    html+= '      <td>' + it.MA_MH +' - ' + it.TEN_MH + '</td>';
	    html+= '      <td>' + parseInt( it.COUNT) + '</td>';
	    html+= '    </tr>';
	    categories.push( it.MA_MH +' - ' + it.TEN_MH );
	    datas.push( parseInt( it.COUNT) );
	}
 
    html+= '  </tbody>';
    html+= '</table>';

    $("#data_container").html(html);
    
    //markup table
    //markup_table();
    
    return {c : categories, d : datas}
}
function drawChart(datainfo) {
	var series_data = [{
	    name: 'Số SV', //neu co nhieu series thi dung
	    //data: [107, 31, 635, 203, 0]
		data : datainfo.d
	}];
	//var categories_data = ['Toán 1', 'Kỹ thuật lập trình', 'Mạng máy tính', 'Trình biên dịch', 'Khai phá dữ liệu'];
	var categories_data = datainfo.c;
	
    $('#chart_container').highcharts({
        chart: {
            type: type_chart,
            height: datainfo.d.length * 20 + 120 
        },
        title: {
            text: '$pagename'
        },
        subtitle: {
            text: jQuery("#khoa :selected").text()
        },
        xAxis: {
            categories: categories_data,
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Số SV',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: '' //don vi 
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            //layout: 'horizontal', //'vertical'
            //align: 'right',
            //verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: series_data
    });
}

function export_excel() {
	var filename = "bc-dkmh-1-hk"+ jQuery("#hocKy").val() 
		+ "-" + jQuery("#khoa").val()
		+ ".xls"; 
    tableToExcel('table_container', 'baocao', filename);
}

function markup_table(){
	$('#table_container').bind('dynatable:preinit', function (e, dynatable) {
        dynatable.utility.textTransform.myNewStyle = function (text) {
            return text
             .replace(/\s+/, '_')
             .replace(/[A-Z]/, function ($1) { return $1 + $1 });
        };
    }).dynatable({
        table: {
            defaultColumnIdStyle: 'myNewStyle'
        },
        features: {
            paginate: false,
            search: false,
            recordCount: false,
            perPageSelect: false
        }
    });
}

</script>

</head>
<body>
<!-- tab menu -->
#parse("vm/common/top.html") 

<!-- title page -->
#parse("vm/common/title.html")
<!-- Content ---->
<div class="content_wapper padding">
<div class="container">
<div class="row">

<!-- left menu -->
#parse("vm/common/left-menu.html")

<!-- right content -->
#parse("vm/common/small-title.html")

<div class="sinhvien_wapper" style="">   
    <!--table-->
    <div>
    <!--filter-->
    <div class="row padding_notop" style="border-bottom: 1px solid #FFFFFF;">
    <div class="hocky-filter col-md-3" >
        <label>Học kỳ</label>
    	<select id="hocKy" class="form-control" name="hocKy">
          <option value="20142">HK2 2014-2015</option>
          <option value="20141">HK1 2014-2015</option>
          
          <option value="20133">HK3 2013-2014</option>
          <option value="20132">HK2 2013-2014</option>
          <option value="20131">HK1 2013-2014</option>
          
          <option value="20123">HK3 2012-2013</option>
          <option value="20122">HK2 2012-2013</option>
          <option value="20121">HK1 2012-2013</option>
          
          <option value="20113">HK3 2011-2012</option>
          <option value="20112">HK2 2011-2012</option>
          <option value="20111">HK1 2011-2012</option>
        </select>
    </div>
    <div class="col-md-1"></div>
    
    <div class="col-md-3" style="margin-left: 20px;padding-top: 25px;">
        <div class="button" style="width: 120px;" onclick="report()" >Báo cáo</div>
    </div>
    </div>

    <!-------------ketqua-------------->
    <div id="ketqua_container" style="margin-top:10px">

    <!--dulieu-->
    <div >
        <label>Dữ liệu</label>
        <div style="float:right">
            <ul>
                <li>
                    <a style="border-width: 1px;border-color: black;border-style: solid;padding: 2px;" 
                        onclick="export_excel()" href="#">EXCEL</a>
                    <a id="dlink"  style="display:none;"></a>
                </li>
            </ul>
        </div>
    </div>
    
    <div id="data_container">
    </div>
    
    <!--chart-->
    <div>
    <div>
        <label>Biểu đồ</label>
    </div>
    <div id="chart_container"></div>
    </div>

    </div>
</div>

</div>


</div>
</div>
</div>
<!-- end Content ---->

<!-- Footer ---->
#parse("vm/common/footer.html")
</body>
</html>